<template>
  <div class="leaderboard-container gradient-bg">
    <header class="header glass">
      <el-button @click="$router.back()" text>
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <h2>排行榜</h2>
      <div style="width: 100px"></div>
    </header>

    <el-tabs v-model="activeTab" class="tabs">
      <el-tab-pane label="全服榜" name="all">
        <div class="leaderboard-list">
          <div v-for="(user, index) in allRanking" :key="user.id" class="rank-item glass">
            <div class="rank-number" :class="`rank-${index + 1}`">
              {{ index + 1 }}
            </div>
            <div class="user-info">
              <span class="username">{{ user.username }}</span>
              <span class="school">{{ user.school }}</span>
            </div>
            <div class="stats">
              <span>⭐ {{ user.stars }}</span>
              <span>📚 {{ user.words_learned }}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="班级榜" name="class">
        <div class="leaderboard-list">
          <div v-for="(user, index) in classRanking" :key="user.id" class="rank-item glass">
            <div class="rank-number" :class="`rank-${index + 1}`">
              {{ index + 1 }}
            </div>
            <div class="user-info">
              <span class="username">{{ user.username }}</span>
              <span class="grade">{{ user.grade }}</span>
            </div>
            <div class="stats">
              <span>⭐ {{ user.stars }}</span>
              <span>📚 {{ user.words_learned }}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { socialApi } from '@/api/social'

const activeTab = ref('all')
const allRanking = ref<any[]>([])
const classRanking = ref<any[]>([])

const loadRankings = async () => {
  try {
    const res = await socialApi.getLeaderboard()
    if (res.success && res.data) {
      allRanking.value = res.data
    }
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  loadRankings()
})
</script>

<style scoped lang="scss">
.leaderboard-container {
  width: 100%;
  min-height: 100vh;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  margin-bottom: 30px;
  
  h2 {
    color: white;
    margin: 0;
    font-size: 1.5rem;
  }
}

.tabs {
  max-width: 800px;
  margin: 0 auto;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 0;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  gap: 20px;
  transition: all 0.3s;
  
  &:hover {
    transform: translateX(10px);
  }
  
  .rank-number {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    
    &.rank-1 {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
      color: #333;
      font-size: 2rem;
    }
    
    &.rank-2 {
      background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
      color: #333;
    }
    
    &.rank-3 {
      background: linear-gradient(135deg, #cd7f32 0%, #d4a574 100%);
      color: #fff;
    }
  }
  
  .user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    
    .username {
      color: white;
      font-size: 1.2rem;
      font-weight: bold;
    }
    
    .school,
    .grade {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
    }
  }
  
  .stats {
    display: flex;
    gap: 20px;
    color: white;
    font-size: 1.1rem;
  }
}
</style>
